import React,{ReactElement,memo,useState} from 'react';
import {Image, Swiper, SwiperItem} from '@tarojs/components';
import Taro from '@tarojs/taro';
import './CommodDetails.scss'


interface IMySwiperProps{
  img:string[]
}

export const MySwiper:React.FC<IMySwiperProps> = memo((props):ReactElement => {
  const [currentPage,setCurrentState] = useState(0);//当前下标

  const swiperImgs = props.img;

  //预览图片
  const previewImages = () => {
      Taro.previewImage({
        current:swiperImgs[currentPage],
        urls:swiperImgs
      })
  }

  //改变当前下标
  const changeCurrentIndex = (e):void => setCurrentState(e.detail.current);

  return (
      <Swiper indicatorDots circular className='swiper' current={currentPage} onChange={changeCurrentIndex}>
        {
          swiperImgs.map(item => {
            return (
              <SwiperItem className='SwiperItem' onClick={previewImages}>
                <Image src={item} mode='widthFix' className='image' />
              </SwiperItem>
            )
          })
        }
      </Swiper>
  )
})
